<template>
<div>
    <div class="spetopic">
            <div class="title">专题精选</div>
           <!--  <div class="van-swipe">
                <div class="van-swipw_track">
                    <div class="van-swipe-item" v-for="item in topicList" :key="item.id" >
                         <img v-lazy="item.scene_pic_url" style="display: block;width:100%;" alt="">
                        <h2>
                            {{item.title}}
                            <span style="color: darkred;">￥ {{item.price_info}}.00元起</span>
                        </h2>
                        <p>{{item.subtitle}}</p>
                    </div>
                   
                </div>
            </div> -->
            <van-swipe :loop="false" :width="300" :show-indicators="false">
            <van-swipe-item v-for="item in topicList" :key="item.id" @click="$router.push('/topic')">
                <img v-lazy="item.item_pic_url" alt="" />
                <h2>
                    {{ item.title }}
                    <span style="color: darkred">￥{{ item.price_info }}.00元起</span>
                </h2>
                <p>{{ item.subtitle }}</p>
            </van-swipe-item>
            </van-swipe>
        </div>
</div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Special",
 
  mounted() {
    this.$store.dispatch("getHomeDB");
  },
  computed: {
    ...mapGetters(["topicList"]),
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.spetopic {
  margin-top: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 0 8px;
  .title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: .2rem;
  }
  .van-swipe-item {
    
    margin-right: 15px;
    height: auto;
    padding-bottom: 10px;
    background-color: #fff;
    h2 {
      line-height: 40px;
      font-size: .16rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 90%;
      font-weight: normal;
    }
    p {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 90%;
      font-size: .14rem;
    }
    img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>